<template>
	<view class="curry-content">
		<!-- 导航栏 -->
		<view class="search-header">
			<view @click="handeleTo">
				<image class="back-icon" src="@/static/index2/index7.png" mode=""></image>
			</view>
			<view class="header-name">{{$t('采购计划')}}</view>
			<view></view>
		</view>
		<!-- 详情列表 -->
		<template v-if="!isEdit">
			<view class="header_title">
				<image class="icon" src="@/static/index2/icon_01.png" mode=""></image>
				<view class="title">{{$t('采购计划')}} ({{total}})</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list_wrap" refresher-enabled="true"
				:refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
				@refresherrestore="store"
				refresher-background="background: linear-gradient(90deg, #82B0FC -2%, #90DAE6 105%);">
				<template v-if="!!listData && !!listData.length">
					<view class="w100p list_item" v-for="item in listData" :key="item.id">
						<block v-if="item.status !== 1">
							<image v-if="lang === 'zh'" class="cancel" src="@/static/index2/cancel.png" mode="widthFix">
							</image>
							<image v-else class="cancel" src="@/static/index2/cancel_ru.png" mode="widthFix"></image>
						</block>
						<view class="w100p list_title">
							{{$t('计划日期')}}: {{item.send_goods_date || "-"}}
						</view>
						<view class="w100p list_details">
							<view class="w100p item">
								<view class="name">{{$t('商品名称')}}：</view>
								<view class="item_content">{{(lang === "zh" ? item.goods : item.goods_ru) || "-"}}
								</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('商品类型')}}：</view>
								<view class="item_content">{{ getType(item.goods_type) }}</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('商品分类')}}：</view>
								<view class="item_content">{{item.p_category[langName] || "-"}}</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('二级分类')}}：</view>
								<view class="item_content">{{item.category[langName] || "-"}}</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('采购数量')}}：</view>
								<view class="item_content">{{item.number || "0"}}
									{{(lang === "zh" ? item.number_unit : item.number_unit_ru) || ""}}
								</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('采购总重量(kg)')}}：</view>
								<view class="item_content">{{item.weight || "0"}}</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('采购总体积(m³)')}}：</view>
								<view class="item_content">{{item.volume || "0"}}</view>
							</view>
							<view class="w100p item">
								<view class="name">{{$t('创建时间')}}：</view>
								<view class="item_content">{{item.create_at || "0"}}</view>
							</view>
						</view>
						<view class="w100p list_btn" v-if="item.status === 1">
							<view class="item item1" @click="delData(item.id)">{{$t('作废')}}</view>
							<view class="item item2" @click="createPlan(item)">{{$t('编辑')}}</view>
						</view>
					</view>
				</template>
				<view v-if="!listData || !listData.length" class="Currently-unavailable">
					<image style="width: 50%;margin-top: 120rpx" src="~@/static/index2/empty.png" mode="widthFix">
					</image>
				</view>
			</scroll-view>
			<view class="w100p create_wrap">
				<view class="w100p create_btn" @click="createPlan('')">{{$t('创建计划')}}</view>
			</view>
		</template>
		<!-- 创建列表 -->
		<CreatePlan class="z_index" v-if="isEdit" :item="item" :lang="lang" :langName="langName" :typeList="typeList"
			:classificationList="classificationList" @createSuccess="createSuccess"></CreatePlan>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 792rpx;position: absolute;top: 0;z-index: 1;"
			src="~@/static/index2/20241101130857.png" mode=""></image>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
	} from '@/config/app';
	import CreatePlan from "./components/createPlan.vue";
	export default {
		components: {
			CreatePlan
		},
		data() {
			return {
				IMAGE_URL,
				longPressText: '',
				lang: 'zh',
				langName: 'name',
				freshIsShow: false,
				scrollTop: 0,
				listData: [],
				total: 0,
				limit: 20,
				page: 1,
				isEdit: false,
				item: {},
				typeList: [{
						value: "1",
						label: this.$t("中国货物"),
						extra: {
							sort: 0,
						}
					},
					{
						value: "2",
						label: this.$t("俄罗斯货物"),
						extra: {
							sort: 1,
						}
					},
					{
						value: "3",
						label: this.$t("在俄中国货物"),
						extra: {
							sort: 2,
						}
					},
					{
						value: "4",
						label: this.$t("在中俄罗斯货物"),
						extra: {
							sort: 3,
						}
					}
				],
				classificationList: [],
			}
		},
		onLoad() {

		},
		created() {
			uni.showLoading({
				title: this.$t('加载中')
			})
			this.getLang();
		},
		methods: {
			// 右侧标签
			getType(val) {
				let name = "";
				this.typeList.some(item => {
					if (item.value == val) {
						name = item.label;
						return true;
					}
					return false;
				})
				return name;
			},
			// 创建、编辑
			async createPlan(val) {
				if (val) {
					this.item = JSON.parse(JSON.stringify(val));
				} else {
					this.item = null;
				}
				this.isEdit = true;
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1
				this.freshIsShow = true
				this.getData()
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.listData.length < this.total) {
					this.getData()
				}
			},
			// 计划列表数据
			getData() {
				let params = {
					user_id: uni.getStorageSync('userInfoFull').user_id,
					page: this.page,
					limit: this.limit
				}
				this.$u.api.buyer.getPurchaseLists(params).then(res => {
					this.total = res.count;

					if (this.page == 1) {
						this.listData = res.list
						this.page++
						this.freshIsShow = false
					} else {
						this.listData = [...this.listData, ...res.list]
						this.page++
						this.freshIsShow = false
					}

				})

			},

			// 计划列表数据
			delData(id) {
				let params = {
					id: id
				}
				this.$u.api.buyer.delPurchase(params).then(res => {
					if (!!res) {
						uni.showToast({
							icon: 'none',
							title: this.$t('操作成功')
						})
						uni.showLoading({
							title: this.$t('加载中')
						})
						this.getData();
					}
				})

			},
			// 获取商品分类列表
			async getConfirmClass() {
				try {
					let data = {
						type: 'release_goods',
						pid: 0,
						needLogin: true,
						lang: this.lang,
					}
					let res = await this.$u.api.basic.getActionSheetList(data);
					if (!!res?.length) {
						this.classificationList = res.map((item, index) => {
							let obj = {
								label: item[this.langName],
								value: item.id,
								extra: {
									...item,
									sort: index,
								}
							}
							return obj;
						})
					}
				} catch (e) {
					this.classificationList = [];
				}
			},
			handeleTo() {
				if (this.isEdit) {
					this.isEdit = false;
					return;
				}
				uni.navigateBack()
			},
			createSuccess() {
				this.page = 1;
				this.isEdit = false;

				uni.showToast({
					icon: 'none',
					title: this.$t('操作成功')
				})
				uni.showLoading({
					title: this.$t('加载中')
				})
				Promise.all([this.getData()]).then(() => {
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
						this.langName = this.lang === 'zh' ? 'name' : 'name_ru';
					},
					complete: () => {
						Promise.all([this.getConfirmClass(), this.getData()]).then(() => {
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
						})
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #F1F2F4;
	}

	.z_index {
		z-index: 2;
	}

	.w100p {
		width: 100%;
	}

	.curry-content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.search-header {
		z-index: 2;
		width: 690rpx;
		height: 103rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-bottom: -20rpx;

		.back-icon {
			width: 15rpx;
			height: 30rpx;
			margin-bottom: -15rpx;
			padding: 0 20rpx 0 0;
		}

		.header-name {
			color: #fff;
			font-size: 32rpx;
			margin-right: 10rpx;
			margin-bottom: -15rpx;
		}
	}

	.header_title {
		width: 690rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		margin-top: 30rpx;
		z-index: 2;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		.title {
			font-size: 32rpx;
			line-height: 1.2;
			color: #fff;
		}
	}

	.list_wrap {
		width: 690rpx;
		flex: 1;
		overflow: hidden;

		.list_item {
			width: 100%;
			min-height: 496rpx;
			position: relative;
			background: url(/static/index2/list_bg.png) no-repeat center;
			background-size: 100% 100%;
			padding: 0 30rpx 30rpx;
			z-index: 2;
			margin-bottom: 60rpx;

			.cancel {
				position: absolute;
				top: -50rpx;
				right: 10rpx;
				width: 240rpx;
				z-index: 2;
			}

			&:before {
				content: '';
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				top: 84rpx;
				height: 0;
				border-top: 1px dashed #D8D8D8;
				z-index: 1;
			}

			.list_title {
				height: 84rpx;
				line-height: 84rpx;
				font-size: 24rpx;
				color: #1D1D1D;
				margin-bottom: 20rpx;
			}

			.list_details {
				font-size: 24rpx;
				color: #1D1D1D;
				line-height: 1;

				.item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 20rpx;

					.name {
						flex: none;
					}

					.item_content {
						flex: 1;
					}
				}
			}
		}

		.list_btn {
			position: absolute;
			bottom: -30rpx;
			left: 0;
			padding: 0 30rpx;
			z-index: 2;
			display: flex;
			align-items: center;

			.item {
				flex: 1;
				height: 60rpx;
				font-size: 22rpx;
				color: #fff;
				line-height: 60rpx;
				text-align: center;
				border-radius: 60rpx;
			}

			.item1 {
				margin-right: 20rpx;
				background-color: #FF5D5D;
			}

			.item2 {
				background-color: #5282E6;
			}
		}
	}

	.create_wrap {
		padding: 30rpx;
		width: 540rpx;

		.create_btn {
			height: 90rpx;
			border-radius: 90rpx;
			background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%), #5282E6;
			text-align: center;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #fff;
			// background-image: linear-gradient(270deg, #77E6FC 0%, #5DFAC1 33%, #77E6FC 66%, #5DFAC1 100%);
			// background-position: 100%;
			// animation: btnone 2s linear infinite;
			// background-size: 300% 100%;
		}
	}

	.Currently-unavailable {
		width: 100%;
		text-align: center;
		z-index: 2;
		position: relative;
	}

	::v-deep .uni-scroll-view-refresher {
		z-index: 2;
	}
</style>